전역 스타일과 테마 관리

전역 스타일 설정

React 프로젝트를 개발하다 보면, 전역 스타일을 설정할 필요가 있습니다. 전역 스타일은 페이지 전체에 적용되는 CSS로, 모든 컴포넌트에 일관된 디자인을 적용할 때 유용합니다. 전통적인 CSS 방식으로 전역 스타일을 설정할 수 있지만, CSS-in-JS 라이브러리를 사용하는 것이 더 효과적입니다.

CSS-in-JS 소개

CSS-in-JS는 JavaScript 코드 안에 CSS 스타일을 작성하는 방식입니다. 이 접근 방식은 스타일링을 컴포넌트와 함께 관리할 수 있게 해주어 유지보수가 쉬워집니다. 대표적인 CSS-in-JS 라이브러리로는 Styled-Components와 Emotion이 있습니다. 이 두 라이브러리는 다양한 기능과 함께 전역 스타일을 쉽게 설정할 수 있는 방법을 제공합니다.

Styled-Components를 사용한 전역 스타일 설정

먼저, Styled-Components 라이브러리를 설치합니다.

npm install styled-components

다음으로, 프로젝트 루트에 GlobalStyle.js 파일을 생성하고 전역 스타일을 정의합니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
  }

  h1 {
    color: #333;
  }
`;

export default GlobalStyle;

이제, App.js 파일에서 GlobalStyle 컴포넌트를 불러와서 사용합니다.

import React from 'react';
import GlobalStyle from './GlobalStyle';

function App() {
  return (
    <div>
      <GlobalStyle />
      <h1>안녕하세요, React!</h1>
    </div>
  );
}

export default App;

이렇게 하면, GlobalStyle에서 정의한 스타일이 애플리케이션 전체에 적용됩니다.

테마 관리

테마를 사용하면 애플리케이션의 색상, 폰트, 레이아웃 등의 스타일을 쉽게 변경할 수 있습니다. Styled-Components와 같은 CSS-in-JS 라이브러리에서 테마를 설정하는 방법을 알아보겠습니다.

Styled-Components를 사용한 테마 설정

먼저, 테마를 정의합니다. theme.js 파일을 생성합니다.

const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#1DB954'
  },
  fonts: {
    main: 'Helvetica, Arial, sans-serif'
  }
};

export default theme;

그 다음, ThemeProvider를 사용하여 테마를 적용합니다.

import React from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './GlobalStyle';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <div>
        <h1>안녕하세요, React!</h1>
      </div>
    </ThemeProvider>
  );
}

export default App;

이제, 스타일 정의에서 테마를 참조할 수 있습니다.

import styled from 'styled-components';

const Title = styled.h1`
  color: ${({ theme }) => theme.colors.primary};
  font-family: ${({ theme }) => theme.fonts.main};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Title>안녕하세요, React!</Title>
    </ThemeProvider>
  );
}

export default App;

위 코드에서 볼 수 있듯이, 테마의 색상과 폰트를 스타일 정의에서 쉽게 참조할 수 있습니다.

더 알아보기

Styled-Components: 스타일을 컴포넌트화하여 관리하는 방법
Emotion: CSS-in-JS 라이브러리의 또 다른 예제
ThemeProvider: 테마를 전역으로 적용하는 방법
Global Styles: 전역 스타일을 설정하는 방법
CSS-in-JS: JavaScript에서 CSS를 작성하는 방식

내용 요약

전역 스타일과 테마 관리는 React 애플리케이션에서 일관된 디자인을 유지하는 데 매우 중요합니다. Styled-Components와 같은 CSS-in-JS 라이브러리를 사용하면 전역 스타일을 설정하고 테마를 적용하는 작업이 쉬워집니다. 전역 스타일은 createGlobalStyle 함수를 사용하고, 테마는 ThemeProvider로 애플리케이션에 적용합니다. 이를 통해 유지보수와 확장성이 용이한 스타일링을 구현할 수 있습니다.

전역 스타일 설정​

CSS-in-JS 소개​

Styled-Components를 사용한 전역 스타일 설정​

테마 관리​

Styled-Components를 사용한 테마 설정​

더 알아보기​

내용 요약​